Skip to main content

🤖 AI Agent

The AI Agent panel lets you generate fully-coded components simply by describing them in plain language. Use it to quickly prototype and add custom UI elements without writing code by hand.

Open the AI Agent​

  • Click the Chat icon in the left toolbar to reveal the AI Agent panel.
  • In the “Describe your component” text box, type a clear, concise prompt that outlines:
    • The component’s purpose (e.g., “pricing table,” “testimonial slider”).
    • Layout details (number of items, columns, rows).
    • Styling cues (colors, fonts, hover states).
    • Any interactive behavior (hover effects, selected states).
  • Click Generate Component.
  • The AI will process your prompt and display:
    • A live Preview of the generated component.
    • The underlying Code that implements it.
  • When you’re happy with the design, click Add to Canvas.
  • The new component will be placed onto your screen, ready for further customization like any built‑in AppStruct component.

Edit Code (Optional)​

  • Click Edit Code in the AI Agent panel.
  • Modify the JavaScript/JSX or settings as desired.
  • Click Apply to update the component on your canvas with your changes.
tip

After adding your AI‑generated component, you can still use the left and right toolbars to attach actions, adjust responsive settings, and style the element just like any other component.

Best Practices​

  • Be Specific: Include clear details in your prompt—number of items, layout structure, colors, fonts, and interactive behaviors—to get accurate results.
  • Use Examples: Reference existing UI patterns or components (e.g., “like a Cupertino-style pricing table”) to guide the AI.
  • Preview & Test: Always inspect the live preview and test interactions before adding to canvas. This helps catch any layout or styling issues early.
  • Leverage Code Editing: If the AI’s output is close but not perfect, use Edit Code to fine‑tune structure, props, or styles.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].